<template>
	<view>
		<view class="banner">
			<swiper class="swiper" circular indicator-dots indicator-color="rgba(255,255,255,.5)"
				indicator-active-color="#ffffff" duration="500" autoplay interval="3000">
				<swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index">
					<image class="img" :src="item.img"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="nav">
			<view class="item" v-for="(item,index) in navList" :key="index" @click="toPage(item)">
				<image :src="item.img" class="img"></image>
				<view class="text">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {},
		data() {
			return {
				newTime: '',
				bannerList: [{
						img: 'https://www.sanguosha.cn/storage/uploads/images/Re9rjbyeY39KpPJK7nExPByuGeHWoF6mGFrYP1Uw.jpeg'
					},
					{
						img: 'https://www.sanguosha.cn/storage/uploads/images/2BBalbiSLBXqhN8DPflb4IMZaz8Simoy8iuVl7xx.jpeg'
					},
					{
						img: 'https://www.sanguosha.cn/storage/uploads/images/fw3Ej5anCBWhBXDXjZG9UX0izp5qeNOWpnudYkjO.jpeg'
					},
				],
				navList: [{
						text: '三国杀diy',
						img: '../../static/images/img/index-nav1.png',
						url: '/sub-diy/sgs/sgs',
						login: false,

					},
					// {
					// 	text: '游戏王diy',
					// 	img: '../../static/images/img/index-nav2.png',
					// 	url: '/sub-diy/yxw/yxw'
					// },
					// {
					// 	text: 'AI绘图',
					// 	img: '../../static/images/img/index-nav3.png',
					// 	url: '/sub-diy/ai/ai',
					// 	login: true,
					// }
				]
			}
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		watch: {},
		methods: {
			toPage(e) {
				uni.navigateTo({
					url: e.url
				})
			},

			//用户注册/登录
			login() {
				let info = {
					nickName: "微信用户",
					avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
				}
				wx.cloud.callFunction({
					name: 'login',
					data: info
				}).then(res => {
					// uni.showToast({
					// 	title: '登录成功',
					// })
					uni.setStorageSync('userInfo', res.result.data.info)
					uni.setStorageSync('user_id', res.result.data.info.user_id)
				})
			},

		},
		onLoad(options) {
			// this.getTime()
			// this.login()
		},
		onShow() {},
		onReady() {},
		onPullDownRefresh() {},
		onReachBottom() {},
		onShareAppMessage() {
			return {
				title: '啊吧卡牌',
				path: '/pages/index/index',
			}
		},
		onShareTimeline() {
			return {
				title: '啊吧卡牌',
				path: '/pages/index/index',
			}
		},
		onPageScroll() {},

	}
</script>

<style lang="scss" scoped>
	.banner {
		margin-top: 20rpx;

		.swiper {
			width: 690rpx;
			height: 380rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-left: 30rpx;

			.swiper-item {
				width: 690rpx;
				height: 380rpx;
				border-radius: 20rpx;

				.img {
					width: 690rpx;
					height: 380rpx;
					border-radius: 20rpx;
				}
			}

		}
	}

	.nav {
		display: grid;
		justify-content: space-between;
		grid-template-columns: repeat(auto-fill, 160rpx);
		margin-top: 50rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;

		.item {
			width: 160rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: #fff;
			text-align: center;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.img {
				width: 120rpx;
				height: 120rpx;
			}

			.text {
				font-size: 26rpx;
			}
		}
	}
</style>
